import React, {useEffect, useState} from 'react';
import {Center, View, Text, Button} from 'native-base';
import {StyleSheet, TouchableOpacity} from 'react-native';
import axios from "axios";
import side from '../../capsulation/sider';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
import nums from '../../capsulation/nums';
export const AncientSeal = ({navigation, tempIpt}) => {
  const [length, setLength] = useState('0');
  const [datas, setDatas] = useState([]);
  useEffect(()=>{
    searchMsg();
  },[tempIpt]);
  async function searchMsg() {
    let data = undefined;
    if(tempIpt.trim().length!==0){
      data = await axios({
        method: 'post',
        url: 'https://www.guyinbaike.com/apiSearchYintui',
        data: {
          params: side.getSider(tempIpt),
          get_length: true,
          key: true,
        },
      });
    }
    setLength(data !== undefined&&nums.nums(data.data[7].replace(')','')));
    setDatas(data !== undefined&&data.data);
  }
  return <TouchableOpacity
      onPress={() => {
        if(length!==false){
          navigation.navigate('NewAcientNav', {
            datas,
            tempIpt
          });
        }
      }}
  >
    <View style={styles.container} colorScheme="f2f2f2">
      <Center
          _text={{
            fontWeight: 'bold',
            color: '#797979',
          }}>
        古印印蜕
      </Center>
      <View style={styles.numVessels}>
        <View style={styles.searchNum}>
          <Text style={styles.numText}>{length}</Text>
        </View>
        <View style={styles.introduce}>
          <Text style={styles.introduceText}>枚</Text>
        </View>
      </View>
    </View>
  </TouchableOpacity>
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  numVessels: {
    width: '100%',
    height: 40,
    backgroundColor: '#f2f2f2',
    position: 'relative',
  },
  searchNum: {
    width: '100%',
    height: 40,
  },
  numText: {
    height: '100%',
    width: '100%',
    lineHeight: 40,
    color: '#06ae56',
    fontWeight: 'bold',
    paddingLeft: 10,
    paddingRight: 10,
  },
  introduce: {
    width: '50%',
    height: 40,
    position: 'absolute',
    right: 0,
    bottom: 0,
  },
  introduceText: {
    color: '#d5d4d4',
    lineHeight: 40,
    textAlign: 'center',
    fontSize: 20,
  },
});
